<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>隔行变色的商品表</title>
    <style>
        body {
            width: 600px;
        }
        table {
            border: 2px solid black;
        }
        table {
            width: 100%;
        }
        th {
            height: 50px;
        }
        th, td {
            border-bottom: 1px solid black;
            text-align: center;
        }
        [v-cloak] {
            display: none;
        }
        .even {
            background-color: #7AFEC6;
        }

    </style>
  </head>
  <body>
    <div id="app" v-cloak>
        <table>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>库存</th>
                <th>价格</th>
                <th>产地</th>
            </tr>
            <tr v-for="(goods, index) in goodss"
            :key="goods.id" :class="{even: (index+1) % 2 === 0}">
                <td>{{ goods.id }}</td>
                <td>{{ goods.title }}</td>
                <td>{{ goods.num }}</td>
                <td>{{ goods.price }}</td>
                <td>{{ goods.city }}</td>
                <td><button @click="deleteItem(index)">删除</button></td>
            </tr>
        </table>
    </div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    goodss: [{
                        id: 1,
                        title: '洗衣机',
                        num: '2800台',
                        price: '188',
                        city: '北京'
                    },
                    {
                        id: 2,
                        title: '电视机',
                        num: '2600台',
                        price: 188,
                        city: '上海'
                    },
                    {
                        id: 3,
                        title: '手机',
                        num: '2800台',
                        price: 188,
                        city: '广州'
                    },
                    {
                        id: 4,
                        title: '电脑',
                        num: '2800台',
                        price: 188,
                        city: '深圳'
                    }]
                }
            },
            methods: {
                deleteItem(index) {
                    this.goodss.splice(index, 1)
                }
            }
        }).mount('#app');
    </script>
  </body>
</html>
